/**
 * Created by Dalyn on 2017/3/15.
 * 贷款设置-弹框
 */
import React, {Component}from 'react';
import Relay from "react-relay";
import ReactKey from "../../util/ReactKey"
import "./css/product.css"
import InputBox from "../../common/InputBox";
import Confirm from "../../common/Confirm";
import AddGoodsMutation from "./mutation/AddGoodsMutation"
// import CreateLoanInfoMutation from "./mutation/CreateLoanInfoMutation"

import {_Icon,_Modal} from 'ANT_DE';
const Icon = _Icon,
       Modal = _Modal;

export default class ProductBomb extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            displayflag: true,
            failHint:true
        };

        this.properties={};

        this.style_ = {
            confirm: {
                width: '80px',
                height: '30px',
                backgroundColor: "#36b3b3",
                fontSize: "14px",
                color: "#fff",
                marginTop: "16px",
                marginLeft: "20px",
                fontFamily: "Microsoft YaHei"
            },
            addInput: {
                width: "120px",
                height: "22px",
                marginTop: "10px",
                borderColor:"#a0d468",
                paddingLeft:5,
                paddingRight:5
            },
        };
        this.isshow = 'none';
        this.isRelay = true;
        this.categoryMapper=this.props.categoryMapper;
    }

    componentWillMount() {

    }

    /*失去焦点*/
    bluron(type) {
        switch (type) {
            case "productName":{
                let regProductName =/^\s*$/g;

                let value = this.refs["productName"].state.text;

                if (regProductName.test(value)){
                    this.setState({
                        productName:'不能为空！',
                    });
                }else {
                    this.setState({
                        productName:'',
                    });
                }
                break;
            }
        }
    }

    /*获取焦点*/
    focuson(type) {
      /*  switch (type) {
            case "upperLimit":
                this.isRelay = true;
                this.setState({
                    upperLimit: ""
                });
                return;
            case "loanRatio":
                this.isRelay = true;
                this.setState({
                    loanRatio: ""
                });
                return;
            case "dayRate":
                this.isRelay = true;
                this.setState({
                    dayRate: ""
                });
                return;
        }*/
    }


    relayAdd() {
        Relay.Store.commitUpdate(
            new AddGoodsMutation(this.properties),
            {
                onFailure: () => {
                    console.log("请求失败")
                },
                onSuccess: (response) => {
                    let data = response.addGoods.responseData;
                    if (data.errorCode === "0") {
                        /*/!*请求成功-弹框隐藏*!/*/
                        this.setState({
                            displayflag: true
                        });
                        this.props.addSuccess();
                        //成功后清楚input便签中的数据
                        this.props.goodsProperty.map((item,index)=>{
                            this.setState({
                                [item]:'',
                            });
                            this.refs[item].setState({
                                text:''
                            });
                        })
                    } else {
                        this.setState({
                            hint: data.value,
                            failHint:false
                        },()=>{
                            let timer = setTimeout(()=>{
                                clearTimeout(timer);
                                this.setState({
                                    failHint:true,
                                })
                            },1500);
                        });
                    }
                }

            }
        );
    }

    /*点击确认*/
    handleConfirm(flag) {
        let regProductName =/^\s*$/g;

        let value = this.refs["productName"].state.text;

        if (regProductName.test(value)){
            this.setState({
                productName:'不能为空！',
            });

            return;
        }

        let goodsProperty = this.props.goodsProperty;
        goodsProperty.map((item,index)=>{
           let text = this.refs[item].state.text;
            this.properties[item]=text;
            this.setState({
                [item]:'',
            });
        })
        this.properties["categoryId"] = this.props.categoryId

        this.relayAdd();
        this.setState({
            hint: ""
        });
        this.properties = {};
    }

    showWindow(flag){
        // this.props.goodsProperty.map((item,index)=>{
        //     let goodsPropertyName =this.props.propertyMapper[item];
        //     this.refs[item].setState({
        //         placeholder:"请输入"+goodsPropertyName
        //     });
        //     debugger;
        // });
        this.setState({
            displayflag: !flag,
            hint:""
        });
    }
    handleCancel(flag) {
        this.setState({
            displayflag: !flag,
            hint:""
        });
        this.properties = {};
        this.props.goodsProperty.map((item,index)=>{
            this.setState({
                [item]:'',
            });
            this.refs[item].setState({
                text:''
            });
        })
    }
    addInput(){
        let goodsProperty = this.props.goodsProperty;
        return goodsProperty.map((item,index)=>{
            return (
                <div className="product_set_inputBox product_set_float" key={item+"_add"}>
                    <InputBox titletext={this.props.propertyMapper[item]+"："} className="people_border-none" space={15} style={this.style_.addInput} defaultvalute={"请输入"+this.props.propertyMapper[item]} ref={item}
                              maxlength={30} bluron={this.bluron.bind(this,item)}
                              focuson={this.focuson.bind(this,item)}/>
                    <span className="product_set_hint1">{this.state[item]}</span>
                </div>
            )
        })
    }
    render() {
        return (
        <Modal
            className="modal_gre-title"
            visible={!this.state.displayflag }
            onCancel={this.handleCancel.bind(this, this.state.displayflag)}
            onOk={this.handleConfirm.bind(this, this.state.displayflag)}
            title="添加产品"
        >
            <div className="product_set_up clear"><div className="product_set_inputBox product_set_float" key={ReactKey.key}>
                <InputBox titletext="商品类型" className="people_border-none" space={15} style={this.style_.addInput} defaultvalute={this.categoryMapper[this.props.categoryId]} ref={this.categoryMapper[this.props.categoryId]} maxlength={30} disabled="true"
            />
                <span className="product_set_hint1"></span>
            </div>
                {
                    this.addInput()
                }
            </div>


            {/*操作失败的提示*/}
            <div className="settle_fail_bg" style={this.state.failHint ? {display: 'none'} : {display: 'block'}}>
                {this.state.hint}
            </div>
        </Modal>
        )
    }
}